<template>
	<div class="article">
		<!-- 头部 -->
		<van-nav-bar
			title="文章详情"
			left-text="返回"
			left-arrow
			class="header"
			@click-left="$router.back()"
			:border="false"
		>
			<template #left>
				<van-icon class="arrow-left" name="arrow-left" />
				<i class="iconfont iconnew"></i>
			</template>
			<template #right>
				<van-button
					round
					:type="article.has_follow ? 'default' : 'danger'"
					size="mini"
					@click="followFn"
				>
					关注
				</van-button>
			</template>
		</van-nav-bar>
		<div class="article-main" v-if="article.title">
			<!-- 标题 -->
			<h2 class="title">{{ article.title }}</h2>
			<!-- 作者 -->
			<div class="author">
				{{ article.user && article.user.nickname }} {{ article.create_date | formatTime }}
			</div>
			<!-- 文章页面 -->
			<div class="article-in" v-html="article.content" v-if="article.type === 1">
				<!-- <div class="content">
					<div class="page js-page on">
						<div class="photo">
							<a
								href="http://cms-bucket.ws.126.net/2019/09/23/1129a4a737c5429d92f5d7478d19873d.jpeg"
							>
								<img
									alt="关晓彤谈私服问题"
									data-src="http://cms-bucket.ws.126.net/2019/09/23/1129a4a737c5429d92f5d7478d19873d.jpeg"
									src="http://cms-bucket.ws.126.net/2019/09/23/1129a4a737c5429d92f5d7478d19873d.jpeg?imageView&amp;thumbnail=750x0&amp;quality=85&amp;type=jpg&amp;interlace=1"
								/>
								<span>关晓彤谈私服问题</span>
							</a>
						</div>
						<p>
							近日，关晓彤接受某时尚媒体采被问及私服问题时，大方回应称，“（私服）时好时坏吧，因为我的衣服老把自己分好多节。”同时她还劝诫道：“个高的女生不适合get我的同款。”
						</p>
						<p>对此，网友留言纷纷表示：“性格不错”、“智商情商都在线的女生”。</p>
						<div class="otitle_editor">
							<p class="editor">(责任编辑：李思_NBJ11322)</p>
						</div>
					</div>
				</div> -->
			</div>
			<!-- 视频页面 -->
			<div class="video-group" v-else>
				<!-- 
			      PS: 梨视频网站的视频大家可以谁便拿(会审查元素就行)
			        1. poster     封面照片
			        2. src        视频播放真实地址
			        3. controls   操作栏()
					'https://video.pearvideo.com/mp4/third/20210702/cont-1734086-10054243-203058-hd.mp4'
			    -->
				<video
					muted
					ref="video"
					class="video"
					:poster="article.cover && article.cover[0].url"
					:src="
						'https://video.pearvideo.com/mp4/third/20210702/cont-1734086-10054243-203058-hd.mp4'
					"
					controls
				></video>
				<!-- <i v-show="showPlayBtn" class="iconfont iconshipin" @click="playBtn"></i> -->
			</div>
		</div>

		<!-- 点赞 -->
		<div class="operate">
			<div class="btn" @click="likeFn" :class="{ active: article.has_like }">
				<i class="iconfont icondianzan"></i>
				<span>{{ article.like_length }}</span>
			</div>
			<div class="btn">
				<i class="iconfont iconweixin"></i>
				<span>微信</span>
			</div>
		</div>

		<!-- 评论 -->
		<MyComment :article="article"></MyComment>
	</div>
</template>

<script>
import MyComment from '../components/MyComment.vue';
import { getArticleAPI } from '../api/article.js';
import { followAPI, unFollowAPI, editLikeAPI } from '../api/user.js';
export default {
	name: 'Article',
	async beforeCreate() {
		const article_result = await getArticleAPI(this.$route.query.id);
		console.log(article_result.data.data);
		if (article_result.status !== 200) return console.log('请求失败');
		this.article = article_result.data.data;
	},
	data() {
		return {
			article: {}
		};
	},
	methods: {
		// 点赞
		async likeFn() {
			// 传递文章 id
			const { message } = (await editLikeAPI(this.article.id)).data;
			if (message === '点赞成功') {
				this.article.like_length++;
				this.article.has_like = true;
			} else {
				this.article.like_length--;
				this.article.has_like = false;
			}
			this.$toast(message);
		},
		// 关注作者
		async followFn() {
			// 传递作者 id
			const { id } = this.article.user;
			const result = this.article.has_follow ? await unFollowAPI(id) : await followAPI(id);
			// console.log(result.data)
			this.article.has_follow = !this.article.has_follow;
			this.$toast(result.data.message);
		}
	},
	components: {
		MyComment
	}
};
</script>

<style lang="less" scoped>
// 没有添加 scoped 表示全局样式
//  添加了 scoped 后，到底做了什么事情？？
//     1. 模板中标签自动添加 => <标签名 data-v-xxx class="box">
//     2. 选择器自动添加 => .box[data-v-82768ea8]
.desc() {
	color: #ccc;
	font-size: 13px;
}
.header {
	.arrow-left {
		font-size: 20px;
		color: #000;
	}
	.iconnew {
		font-size: 50px;
	}
}
.article-main {
	padding: 10px;
	.title {
		font-size: 18px;
		font-weight: bold;
		margin: 5px 0;
	}
	.author {
		margin-bottom: 20px;
		.desc;
	}
	// 添加了 /deep/ 后，当前选择器和其后代选择器，都不会添加 [data-v-xxx] 了
	/deep/ .article-in {
		font-size: 13px;
		img {
			width: 100%;
		}
		p {
			text-indent: 2em;
			line-height: 2;
			margin: 0.2em;
		}
		.photo {
			text-align: center;
			margin: 20px 0;
			span {
				.desc;
			}
		}
		.otitle_editor {
			.desc;
			margin-top: 20px;
			.editor {
				text-indent: 0em;
			}
		}
	}
}
.operate {
	display: flex;
	justify-content: space-around;
	align-items: center;
	height: 100px;
	margin-bottom: 50px;
	.btn {
		width: 80px;
		height: 30px;
		border: 1px solid #ccc;
		border-radius: 15px;
		display: flex;
		justify-content: center;
		align-items: center;
		.iconweixin {
			color: #26ce26;
		}
	}
	.active {
		border-color: red;
		color: red;
	}
}
// 视频页面
.video-group {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	.video {
		width: 100%;
		min-height: 200px;
		background-color: #666;
	}

	.iconshipin {
		font-size: 50px;
		color: #fff;
		width: 60px;
		height: 60px;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, 0.5);
		position: absolute;
		z-index: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
.userinfo {
	display: flex;
	height: 50px;
	align-items: center;
	padding: 10px;
	.avatar {
		width: 25px;
		height: 25px;
		margin-right: 10px;
	}
	.nickname {
		flex: 1;
	}
}
</style>
